<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->

    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

    <!-- 引入组件库 -->

    <script src="../js/vue.js"></script>

    <script src="../element-ui/lib/index.js"></script>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script src="../js/axios-0.18.0.js"></script>


</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <h1><i class="el-icon-platform-eleme"></i>数学计算</h1>
        </el-header>

        <el-main>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><a href="../index">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>数学计算</el-breadcrumb-item>
            </el-breadcrumb>
            <el-row :gutter="20">
                <el-col  >
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-s-grid"></i>矩阵计算</span>
                        </div>
                        <div >
                            <el-input
                                    type="textarea"
                                    :rows="10"
                                    placeholder="请输入第一个矩阵"
                                    v-model="textarea1">
                            </el-input>
                            <el-input
                                    type="textarea"
                                    :rows="10"
                                    placeholder="请输入第二个矩阵"
                                    v-model="textarea2">
                            </el-input>
                            <el-input
                                    type="textarea"
                                    autosize
                                    :rows="2"
                                    placeholder="结果"
                                    v-model="textarea3">
                            </el-input>

                                <div slot="tip" class="el-upload__tip">
                                    <p>注意：只支持数字和英文逗号，不能添加任何空格和符号</p>
                                </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col  >
                    <el-card>
                        <el-row>

                            <el-button type="primary" v-on:click="determinant()" round>行列式求值</el-button>
                            <el-button type="primary" v-on:click="solveLinearEquations()" round>解线性方程组</el-button>
                            <el-button type="primary" v-on:click="addMatrices()" round>矩阵的加法</el-button>
                            <el-button type="primary" v-on:click="multiplyMatrices()" round>矩阵的乘法</el-button>
                            <el-button type="primary" v-on:click="transposeMatrix()" round>矩阵的转置</el-button>
                            <el-button type="primary" v-on:click="inverseMatrix()" round>实现逆矩阵</el-button>
                            <el-button type="primary" v-on:click="rankOfMatrix()" round>求矩阵的秩</el-button>
<!--                            <el-button type="primary" v-on:click="isLinearDependent()" round>线性相关的判断</el-button>-->
<!--                            <el-button type="primary" v-on:click="addMatrices()" round>矩阵的特征值</el-button>-->

                        </el-row>



                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>


</div>


<script>


    new Vue({
        el: "#app",
        methods:{
            //把输入值转为二维数组
            makeArray(x){
                //按行拆分输入数据
                const rows = x.split('\n');
                //把每行变成整数数组
                const numbers =rows.map((row)=>
                    row.split(',').map(Number));
                //返回二维数组
                const Array = numbers;

                return Array;

            },
            //把二维数组转为字符串
            makeString(arr){
                let result = '';
                for (let i = 0; i < arr.length; i++) {
                    for (let j = 0; j < arr[i].length; j++) {
                        result = result + arr[i][j] + ( j + 1 == arr[i].length ? '\n' : ',')
                    }
                }
                return result;
            },

            determinant(){

                const twoDArray1 = this.makeArray(this.textarea1);
                // alert(twoDArray)

                $.ajax({
                    type :'post',
                    url :"/math/determinant",
                    contentType :'application/json',
                    data:JSON.stringify({
                        twoDArray1
                    }),

                }).then(res=>{
                    if (res.code == 101){
                        console.log(res.data);
                        this.textarea3 = res.data
                        // this.textarea3 = res.data;
                    }else {
                        this.$message.error("格式不正确");
                    }
                });

            },
            solveLinearEquations(){
                const twoDArray1 = this.makeArray(this.textarea1);
                const twoDArray2 = this.makeArray(this.textarea2);

                $.ajax({
                    type: 'post',
                    url: "/math/solveLinearEquations",
                    contentType: 'application/json',
                    data: JSON.stringify({twoDArray1,twoDArray2})
                }).then(res => {
                    if (res.code == 101){
                        console.log(res.data);
                        this.textarea3 = this.makeString(res.data)
                        // this.textarea3 = res.data;
                    }else {
                        this.$message.error("格式不正确");
                    }

                });
            },
            addMatrices(){
                const twoDArray1 = this.makeArray(this.textarea1);
                const twoDArray2 = this.makeArray(this.textarea2);
                // console.log(twoDArray1)
                // console.log(twoDArray2)
                // console.log(JSON.stringify({twoDArray1,twoDArray2}))
                $.ajax({
                    type: 'post',
                    url: "/math/addMatrices",
                    contentType: 'application/json',
                    data: JSON.stringify({twoDArray1,twoDArray2})
                }).then(res => {
                    if (res.code == 101){
                        console.log(res.data);
                        this.textarea3 = this.makeString(res.data)
                        // this.textarea3 = res.data;
                    }else {
                        this.$message.error("格式不正确");
                    }

                });
            },
            multiplyMatrices(){
                const twoDArray1 = this.makeArray(this.textarea1);
                const twoDArray2 = this.makeArray(this.textarea2);
                $.ajax({
                    type: 'post',
                    url: "/math/multiplyMatrices",
                    contentType: 'application/json',
                    data: JSON.stringify({twoDArray1,twoDArray2})
                }).then(res => {
                    if (res.code == 101){
                        console.log(res.data);
                        this.textarea3 = this.makeString(res.data)
                        // this.textarea3 = res.data;
                    }else {
                        this.$message.error("格式不正确");
                    }

                });
            },
            transposeMatrix(){
                const twoDArray1 = this.makeArray(this.textarea1);

                $.ajax({
                    type :'post',
                    url :"/math/transposeMatrix",
                    contentType :'application/json',
                    data:JSON.stringify({
                        twoDArray1
                    }),

                }).then(res=>{
                    if (res.code == 101){
                        console.log(res.data);
                        this.textarea3 = this.makeString(res.data)
                        // this.textarea3 = res.data;
                    }else {
                        this.$message.error("格式不正确");
                    }
                });
            },
            inverseMatrix(){
                const twoDArray1 = this.makeArray(this.textarea1);
                // alert(twoDArray)

                $.ajax({
                    type :'post',
                    url :"/math/inverseMatrix",
                    contentType :'application/json',
                    data:JSON.stringify({
                        twoDArray1
                    }),

                }).then(res=>{
                    if (res.code == 101){
                        this.textarea3 = this.makeString(res.data)
                        // this.textarea3 = res.data;
                    }else {
                        this.$message.error("格式不正确");
                    }
                });
            },
            rankOfMatrix(){
                const twoDArray1 = this.makeArray(this.textarea1);
                // alert(twoDArray)

                $.ajax({
                    type :'post',
                    url :"/math/rankOfMatrix",
                    contentType :'application/json',
                    data:JSON.stringify({
                        twoDArray1
                    }),

                }).then(res=>{
                    if (res.code == 101){
                        console.log(res.data);
                        this.textarea3 = res.data;
                        // this.textarea3 = res.data;
                    }else {
                        this.$message.error("格式不正确");
                    }
                });
            },
            isLinearDependent(){

            },

        },
        data(){
            return {
                textarea1: '',
                textarea2: '',
                textarea3: ""
            }
        }
    })
</script>
</body>
</html>